import React, { useEffect, useState } from 'react';
import { parseTime } from '@/utils';

const CurrentTime: React.FC = () => {
  const [currentTime, setCurrentTime] = useState<string | null>(null);
  const [currentDate, setCurrentDate] = useState<string>('');
  const [week, setWeek] = useState<string>('');

  const getTime = () => {
    setCurrentTime(parseTime(new Date(), '{h}:{i}:{s}'));
    requestAnimationFrame(getTime);
  };


  useEffect(() => {
    requestAnimationFrame(getTime);

    setCurrentDate(parseTime(new Date(), '{y}-{m}-{d}'));
    const weekDay = parseTime(new Date(), '{a}')
    setWeek(`星期${weekDay}`);

    // 清除 interval 在组件卸载时
    return () => {
      cancelAnimationFrame(getTime);
    };
  }, []);

  return (
    <div className="current-time">
      <div className="time">{currentTime}</div>
      <div className="date">
        {currentDate}
        <span style={{ marginLeft: '16px' }}>{week}</span>
      </div>
    </div>
  );
};

export default CurrentTime;
